<template>
	<view class="order" v-if="details">
		<!-- 导航 -->
		<u-navbar back-text="订单详情" :back-text-style="textStyle" back-icon-color="#000000" style="font-weight: bold;font-family: PingFang SC;"></u-navbar>
			<!-- <u-navbar back-text="订单详情" :back-text-style="textStyle" back-icon-color="#000000"
			 style="font-weight: 400;font-family: PingFang SC;"></u-navbar> -->
		<!-- end -->
		<view>
			<view style="display: flex;align-items: center;">
				<view class="shop_status">
					{{details.statusName}}
				</view>
				<!-- <view v-if="details.orderStatus=='WAIT_PAY_UNIT'&&details.orderType==2">
					<u-button size="mini" shape="circle" type="warning" :custom-style="customType" @click="annius(details.orderId)">重新匹配</u-button>
				</view> -->
			</view>
			<view style="padding: 20rpx 40rpx 18rpx 58rpx;font-size: 26rpx;color: #7A7A7A;">
				<view>
					<text v-if="details.contactsName!=''" style="font-size: 30rpx;">{{details.contactsName}}</text>
					<text v-if="details.contactsPhone!=''" style="padding-left: 32rpx;">{{details.contactsPhone}}</text>
				</view>
				<view v-if="details.orderStatus!=='WAIT_TAKE_FOR_INTERVIEW'" style="margin-top: 8rpx;">详细地址：<text style="padding-left: 16rpx;">{{details.province}}{{details.city}}{{details.region}}{{details.address}}</text></view>
			</view>
			<image src="../../static/icon/dixian.png" mode="" style="width: 100%;height: 4rpx;"></image>
			<view class="shop" style="background-color: #FFFFFF;border-radius: 40rpx 40rpx 0 0;" v-if="details.orderStatus!='MATCHING' && details.employeeInfo!==null ">
				<view class="shop_name">
					<image :src="details.entPortrait" mode="aspectFill"></image>
					<view style="padding-left: 12rpx;">{{details.entName}}</view>
				</view>
			</view>
		</view>

		<view class="allorder">
			<view class="orders">
				<image :src="details.packageImg" mode="aspectFill" class="order_img"></image>
				<view class="person">
					<view class="fenshu">
						<view class="usern">{{details.entName}}</view>
						<view class="jingyan">{{details.totalYear||0}}年行业经验</view>
					</view>
					<view class="dianming">{{details.packageName}}</view>
					<view class="hour">
						X{{details.amount}}
					</view>
				</view>
			</view>
		</view>

		<view class="foot">
			<view class="foot_name" v-if="details.serviceTimeStr!=''&&details.serviceTimeStr!=null">
				<view class="lei">
					预约时间：
				</view>
				<view class="foot_style">
					{{details.serviceTimeStr}}
				</view>
			</view>
			<view class="foot_name">
				<view class="lei">
					下单时间：
				</view>
				<view class="foot_style">
					{{details.createTime.slice(0,16)}}
				</view>
			</view>
			<view class="foot_name">
				<view class="lei">
					余额折扣:
				</view>
				<view class="foot_style">
					<text style="margin-left: 15rpx;">{{details.usedBalances}}</text>
					<label v-if="details.haveCommitPay!=1"   style="font-size:28upx;text-align: center;">
						<radio  @click="radioChange"  style="transform: scale(0.7);" color="#FFC000" value="r1" :checked="check"  v-if="details.haveCommitPay!=1"/>
					</label>
				</view>
			</view>
			
			<view style="border-bottom: 1rpx solid #EBEBEB;" v-if="details.comments">
				<view class="foot_name" style="border-bottom: none!important;">
					<view class="lei">
						备注
					</view>
				</view>
				<view style="font-size: 26rpx;width: 100%;line-height: 56rpx;padding: 0 40rpx 30rpx 58rpx;">
					{{details.comments}}
				</view>
			</view>
			<view v-if="details.packageEmployees!=''">
				<view class="lei" style="padding: 26rpx 40rpx 0rpx 58rpx;">
					服务人员
				</view>
				<view class="wrap">
					<view class="lits" v-for="(item,index) in details.packageEmployees" :key="index" @click="pepoleDetails()">
						<image :src="item.portrait" mode="aspectFill"></image>
						<view style="margin-left: 16rpx;">
							<view>
								<text class="name">{{item.name}}</text>
								<text class="exprience">{{item.workYear}}年工作经验</text>
							</view>
							<view class="goodAt">
								<view class="goods">
									擅长
								</view>
								<view class="have">
									<view v-for="(ite,ind) in item.businessNames">{{ite}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="display: flex;justify-content: space-between;padding: 60rpx 26rpx 0 0;margin-bottom: 150rpx;">
			<view>
			</view>
			<view>
				<view v-if="details.chargeType!=4">
					<view class="write" v-if="details.orderStatus!='MATCHING' && details.employeeInfo!=null" style="font-size: 38rpx;">
						{{details|regularAmount}}
					</view>
				</view>
				<view v-else>
					<view class="write" v-if="details.orderStatus!='MATCHING'">
						<text>
							{{details|monthServicePrice}}
						</text>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="foot_mon">
				<view style="color: #F29423;">
					<!-- <text style="font-size: 19rpx;">￥</text>
					<text style="font-size: 30rpx;font-weight: bold;">{{details.price}}</text>
					<text style="font-size: 15rpx;">元</text> -->
				</view>
				<view style="display: flex;">
					<view v-for="(items,indexs) in details.buttons" :key="indexs">
						<u-button size="medium" shape="square" type="warning" :custom-style="customType" @click="anniu(items,details.businessId,details.orderId,details.employeeInfo?details.employeeInfo.employeeId:null,details.chargeType,items.redirectType)"
						 style="margin: 0 7rpx;" v-if="items.color=='HOLLOW_YELLOW'">{{items.title}}</u-button>
						<u-button size="medium" shape="square" :hair-line="false" :custom-style="customStyle" @click="anniu(items,details.businessId,details.orderId,details.employeeInfo?details.employeeInfo.employeeId:null,details.chargeType,items.redirectType)"
						 style="margin: 0 7rpx;border: none;" v-if="items.color=='GREY'">{{items.title}}</u-button>
						<u-button size="medium" shape="square" :custom-style="customBtyle" @click="anniu(items,details.businessId,details.orderId,details.employeeInfo?details.employeeInfo.employeeId:null,details.chargeType,items.redirectType)"
						 style="margin: 0 7rpx;" type="warning" v-if="items.color=='YELLOW'">{{items.title}}</u-button>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />

	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				is_click:true,
				textStyle: {
					color: '#272755'
				},
				customStyle: {
					backgroundColor: '#EEEEEE',
					color: '#979797',
					border: 'none',
					fontWeight:'bold'
				},
				customType: {
					backgroundColor: '#ffffff',
					color: '#FCA800',
					border: '2rpx solid',
					borderRadius: '30rpx',
					fontWeight:'bold'
				},
				customBtyle:{
					fontWeight:'bold'
				},
				check: false,	
				value: 4,
				orderId: '',
				details: '',
				orderStatus: '',
				quanid:'',
				useBalanceFlagflag:0,
				lists:[
					{name:'小刘',year:5,goods:'日常保洁，新房开荒，日常保洁，新房开荒，日常保洁，新房开荒，'},
					{name:'小刘',year:5,goods:'日常保洁，新房开荒，日常保洁，新房开荒，日常保洁，新房开荒，'},
					{name:'小刘',year:5,goods:'日常保洁，新房开荒，日常保洁，新房开荒，日常保洁，新房开荒，'}
				]
			};
		},
		onLoad(option) {
			that=this;
			if(option.quan_id){
				this.quanid=option.quan_id
			}
			// that.quanid='';
			this.orderId = option.orderId
			console.log(this.orderId, "this.orderId")
			this.orderStatus = option.orderStatus
			console.log(this.orderStatus, "orderStatus")
			this.getOrderDetail();
		},
		onShow() {
			that.is_click=true;
		},
		methods: {
			// 优惠券跳转
			jump_youhui(id,orderStatus){
				uni.navigateTo({
					url:'/pageageA/order/yhquan?id='+id+'&orderStatus='+orderStatus
				})
			},
			// 余额折扣选择
			radioChange(){
				this.check=!this.check;
				if(this.check==true){
					this.useBalanceFlagflag=1
				}else{
					this.useBalanceFlagflag=0
				}
				this.getOrderDetail();
			},
			// 获取套餐订单信息
			getOrderDetail() {
				let _this = this
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'orders/info'
				};
				let data = {
					orderId: _this.orderId,
					couponsId: that.quanid,
					useBalanceFlag:that.useBalanceFlagflag
				};
				_this.http.httpTokenRequest(opts, data).then(res => {
					console.log(res.data)
					_this.details = res.data
				})
			},
			//推送
			ts(){
				uni.requestSubscribeMessage({
				  tmplIds: ['IdSIZcF3KlfXRiP4wvU4jwt6hu2tU2LnbsUPfF_Tq80', 'EjQNBMRd3C1y7Y1OMAyLn7sLsRNoolBBV42v1btLchw'],
				  success (res) {
				  },
				   fail (err) {
			
				        }
			
				})
			},
		anniu(items, businessId, orderId, employeeId, chargeType, redirectType) {
			if(that.is_click==true){
				that.is_click=false;
				var _this = this;
				var opts = {};
				var data = {};
				switch (items.redirectType) {
					case 1:
						//请求接口
						console.log(items, "items")
						opts = {
							way: true, //true JSON请求；false 表单请求
							method: 'post',
							url: items.uri
						};
						data = {
							orderId: orderId,
							userCouponsId: this.quanid,
							useBalanceFlag: this.useBalanceFlagflag
						};
						_this.http.httpTokenRequest(opts, data).then(res => {
							if (res.code == 200) {
								_this.$refs.uToast.show({
									title: res.message,
									type: 'success'
								})
								uni.navigateBack(1)
							} else {
								that.is_click=true;
								_this.$refs.uToast.show({
									title: res.message,
									type: 'error'
								})
							}
						});
						break;
					case 2:
						// 订单详情
						uni.navigateTo({
							url: '../../pageageA/order/orderDetail?orderId=' + orderId + '&orderStatus=' + orderStatus
						});
						
						break;
					case 3:
						// 跳转定金页面
						uni.navigateTo({
							url: '../../pageageA/order/deposit?orderId=' + orderId
						})
						break;
					case 4:
						// 跳转签约页面
						uni.navigateTo({
							url: '../../pageageA/order/sign?orderId=' + orderId + '&redirectType=' + items.redirectType
						})
						break;
					case 5:
						// 跳转续约页面
						uni.navigateTo({
							url: '../../pageageA/order/sign?orderId=' + orderId + '&redirectType=' + items.redirectType
						})
						break;
					case 6:
						// 立即评价
						uni.navigateTo({
							url: '../../pageageA/order/evaluate?orderId=' + orderId
						})
						break;
					case 7:
						// 再次下单
						uni.navigateTo({
							url: '../../pageageA/service/online_order?businessId=' + businessId + '&orderId=' + orderId + '&employeeId=' +
								employeeId + '&chargeType=' + chargeType + '&zcxd=1'
						})
						break;
					case 8:
						// 跳转简历
						uni.navigateTo({
							url: '../../pageageA/home/matching/hisResume/hisResume?employeeId=' + employeeId + '&redirectId=' + businessId +
								'&addType=2'
						})
						break;
					case 9:
						uni.showModal({
							title: '',
							content: '确定要取消该订单吗？',
							cancelText: "我再想想", // 取消按钮的文字  
							confirmText: "确认", // 确认按钮文字  
							cancelColor: '#F29423',
							confirmColor: '#979797',
							success: function(res) {
									that.is_click=true;
								if (res.confirm) {
									let opts = {
										way: true, //true JSON请求；false 表单请求
										method: 'post',
										url: items.uri
									};
									let data = {
										orderId: orderId,
										userCouponsId: that.quanid,
										useBalanceFlag: that.useBalanceFlagflag
									};
									_this.http.httpTokenRequest(opts, data).then(res => {
										if (res.code == 200) {
											_this.$refs.uToast.show({
												title: res.message,
												type: 'success'
											})
											setTimeout(function(){
												uni.switchTab({
													url:'../../pages/order/index'
												})
											})
										} else {
											_this.$refs.uToast.show({
												title: res.message,
												type: 'error'
											})
										}
									})
								}
							}
						});
						break;
					case 10:
						// 支付日常订单
						// that.ts();
						opts = {
							way: true, //true JSON请求；false 表单请求
							method: 'post',
							url: items.uri
						};
						data = {
							orderId: orderId,
							userCouponsId: this.quanid,
							useBalanceFlag: this.useBalanceFlagflag
						};
						_this.http.httpTokenRequest(opts, data).then(res => {
							if (res.code == 200) {
								var needstr=res.data
								uni.requestSubscribeMessage({
								 tmplIds: ['IdSIZcF3KlfXRiP4wvU4jwt6hu2tU2LnbsUPfF_Tq80', 'EjQNBMRd3C1y7Y1OMAyLn7sLsRNoolBBV42v1btLchw'],
								  success (res) {
									  if(needstr.needPay==0){
									  	uni.navigateTo({
									  		url: './paySucess?type=1' + '&orderId=' +orderId
									  	})
									  }else{
									  	_this.wxpay(needstr.vxPayData)
									  }
								  },
								   fail (err) {
											if(needstr.needPay==0){
												uni.navigateTo({
													url: './paySucess?type=1' + '&orderId=' + orderId
												})
											}else{
												_this.wxpay(needstr.vxPayData)
											}
								        }
											
								})
								console.log(res.data)
								
								
							} else {
								that.is_click=true;
								_this.$refs.uToast.show({
									title: res.message,
									type: 'error'
								})
							}
						})
						break;
					case 11:
						// 支付日常订单
						opts = {
							way: true, //true JSON请求；false 表单请求
							method: 'post',
							url: items.uri
						};
						data = {
							orderId: orderId,
							userCouponsId: this.quanid,
							useBalanceFlag: this.useBalanceFlagflag
						};
						_this.http.httpTokenRequest(opts, data).then(res => {
							if (res.code == 200) {
								console.log(res.data)
								var needstr=res.data
								uni.requestSubscribeMessage({
								  tmplIds: ['IdSIZcF3KlfXRiP4wvU4jwt6hu2tU2LnbsUPfF_Tq80', 'EjQNBMRd3C1y7Y1OMAyLn7sLsRNoolBBV42v1btLchw'],
								  success (res) {
									  if(needstr.needPay==0){
									  	uni.navigateTo({
									  		url: './paySucess?type=1' + '&orderId=' +orderId
									  	})
									  }else{
									  	_this.wxpay(needstr.vxPayData)
									  }
								  },
								   fail (err) {
											if(needstr.needPay==0){
												uni.navigateTo({
													url: './paySucess?type=1' + '&orderId=' + orderId
												})
											}else{
												_this.wxpay(needstr.vxPayData)
											}
								        }
											
								})
								console.log(res.data)
								
								
								// if(res.data.needPay==0){
								// 	uni.navigateTo({
								// 		url: './paySucess?type=1' + '&orderId=' + _this.orderId
								// 	})
								// }else{
								// 	_this.wxpay(res.data.vxPayData)
								// }
								
							} else {
								that.is_click=true;
								_this.$refs.uToast.show({
									title: res.message,
									type: 'error'
								})
							}
						})
						break;
					case 12:
						// 申请售后
						uni.navigateTo({
							url: 'cause?orderId=' + orderId
						})
						break;
					case 13:
						// 售后进度
						uni.navigateTo({
							url: 'service?orderId=' + orderId
						})
						break;
						case 14:
							// 支付团购订单
							opts = {
								way: true, //true JSON请求；false 表单请求
								method: 'post',
								url: 'orders/rePay/package'
							};
							data = {
								orderId: orderId,
							};
							_this.http.httpTokenRequest(opts, data).then(res => {
								if (res.code == 200) {
									
									var needstr=res.data
									uni.requestSubscribeMessage({
									  tmplIds: ['IdSIZcF3KlfXRiP4wvU4jwt6hu2tU2LnbsUPfF_Tq80', 'EjQNBMRd3C1y7Y1OMAyLn7sLsRNoolBBV42v1btLchw'],
									  success (res) {
										  if(needstr.needPay==0){
										  	uni.navigateTo({
										  		url: './paySucess?type=1' + '&orderId=' +orderId
										  	})
										  }else{
										  	_this.wxpay(needstr.vxPayData)
										  }
									  },
									   fail (err) {
												if(needstr.needPay==0){
													uni.navigateTo({
														url: './paySucess?type=1' + '&orderId=' + orderId
													})
												}else{
													_this.wxpay(needstr.vxPayData)
												}
									        }
												
									})
									console.log(res.data)
									
									// if(res.data.needPay==0){
									// 	uni.navigateTo({
									// 		url: './paySucess?type=1' + '&orderId=' + _this.orderId
									// 	})
									// }else{
									// 	_this.wxpay(res.data.vxPayData)
									// }
								} else {
									that.is_click=true;
									_this.$refs.uToast.show({
										title: res.message,
										type: 'error'
									})
								}
							})
							break;
					default:
						break;
				}
			}else{
				// uni.showToast({
				// 	title:'请不要频繁操作',
				// 	icon:'none'
				// })
			}
			
		
		},
		wxpay(str) {
			let _this = this
			let query = str
			uni.requestPayment({
				provider: 'wxpay',
				appId: query.appId,
				timeStamp: query.timeStamp + '',
				nonceStr: query.nonceStr,
				package: query.package,
				signType: query.signType,
				paySign: query.sign,
				success: (res) => {
					console.log(res.data, "支付成功")
					uni.navigateTo({
						url: './paySucess?type=1' + '&orderId=' + _this.orderId + '&taocan=1'
					})
				},
				fail: (res) => {
					console.log(res.data, "支付失败")
					uni.navigateTo({
						url: './paySucess'
					})
				},
			})
		},
		
		}
	};
</script>

<style scoped lang="scss">
	/* 导航 */

	/* 未登录状态 */
	.nologin {
		width: 100%;
	}

	.nologin image {
		width: 500rpx;
		display: block;
		margin: 0 auto;
		margin-top: 178rpx;
	}

	.nologin view {
		font-size: 28rpx;
		color: #333;
		text-align: center;
		margin-top: 25rpx;
	}

	.nologin navigator {
		width: 412rpx;
		height: 90rpx;
		// background-color: $uni-color1;
		line-height: 90rpx;
		color: #fff;
		font-size: 36rpx;
		text-align: center;
		border-radius: 45rpx;
		margin: 0 auto;
		margin-top: 100rpx;
	}

	.oderList {
		// padding: 0 40rpx 0 32rpx;
	}

	.shop {
		display: flex;
		justify-content: space-between;
		align-items: center;
		// padding: 12rpx 26rpx 14rpx 32rpx;
		height: 86rpx;
	}

	.shop_name {
		display: flex;
		align-items: center;
		padding: 0 40rpx 0 32rpx;
	}

	.shop_name image {
		width: 52rpx;
		height: 52rpx;
	}

	.shop_status {
		// background-color: #FCA800;
		color: #272755;
		height: 88rpx;
		padding: 0 40rpx 0 44rpx;
		line-height: 88rpx;
		font-size: 38rpx;
		font-weight: bold;
	}

	.line {
		border: 3rpx solid #E4E4E4;
	}

	.allorder {
		padding: 24rpx 40rpx 12rpx 58rpx;
	}

	.orders {
		display: flex;
	}
	.orders .order_img {
		width: 142rpx;
		height: 156rpx;
	}

	.person {
		width: 78%;
		padding-left: 32rpx;
	}

	.order_user {
		padding-top: 6rpx;
		font-size: 36rpx;
		color: #3F3F3F;
	}

	.usern {
		font-size: 26rpx;
		color: #3F3F3F;
		font-weight: 500;
		width: 50%;
		overflow: hidden;white-space: nowrap;text-overflow:ellipsis;
		// margin-right: 20rpx;
	}
	.jingyan{
		width: 160rpx;
		height: 36rpx;
		background: #FFF2D9;
		border: 1px solid #F29423;
		opacity: 1;
		border-radius: 10rpx 0px 10rpx 0px;
		font-size: 22rpx;
		color: #F29423;
		text-align: center;
	}
	.dianming{
		font-size: 26rpx;color: #272755;margin-top: 16rpx;
	}
	.users {
		font-weight: bold;
		padding-top: 6rpx;
		color: #666666;
		font-size: 30rpx;
	}

	.rate {
		color: #979797;
		font-size: 24rpx;
		padding: 4rpx 0 10rpx 0;
	}

	.addres {
		color: #3F3F3F;
		font-size: 26rpx;
		font-weight: 500;
		font-family: PingFang SC;
	}

	.fenshu {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.rates {
		color: #F29423;
		font-size: 26rpx;
		padding-left: 32rpx;
	}

	.detail_two {
		color: #666666;
		font-size: 30rpx;
		font-weight: bold;
		padding: 4rpx 0 0 40rpx;
		font-family: PingFang SC;
	}

	.style {
		padding-top: 24rpx;
		font-size: 26rpx;
		color: #979797;
		font-weight: 500;
	}

	.pad {
		padding-left: 18rpx;
	}

	.hour {
		color: #3F3F3F;
		font-size: 26rpx;
		padding-top: 32rpx;
		font-weight: 500;
		font-family: PingFang SC;
	}

	.foot {
		// padding: 48rpx 40rpx 0 40rpx;
		font-family: PingFang SC;
	}

	.foot_name {
		display: flex;
		align-items: center;
		justify-content: space-between;
		// padding-top: 26rpx;
		font-size: 26rpx;
		font-weight: 400;
		// padding-bottom: 30rpx;
		padding: 26rpx 40rpx 30rpx 58rpx;
		border-bottom: 1rpx solid #EBEBEB;
		color: #7A7A7A;
	}

	.lei {
		font-weight: 500;
	}

	.footer {
		height: 112rpx;
		position: fixed;
		z-index: 99;
		bottom: 0;
		width: 100%;
		background: #FFFFFF;
		opacity: 1;
	}

	.foot_mon {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 20rpx 0 0;
	}

	.write {
		font-size: 38rpx;
		font-weight: 500;
		color: #666666;
	}

	.write text {
		color: #FCA800;
	}
	.wrap {
		padding: 0 26rpx 10rpx 44rpx;
	}
	.lits{
		margin-top: 30rpx;display: flex;
	}
	.lits image{
		width: 104rpx;height: 104rpx;border-radius: 50%;
	}
	.name{
		color: #7A7A7A;font-size: 30rpx;font-weight: bold;
	}
	.exprience{
		color: #F29423;font-size: 22rpx;border-radius: 5px 0px 5px 0px;border: 1px solid #F29423;background: #FFF2D9;text-align: center;padding: 2rpx 20rpx;margin-left: 16rpx;
	}
	.goodAt{
		display: flex;font-size: 26rpx;margin-top: 10rpx;
	}
	.goods{
		color: #9393AA;
	}
	.have{
		width: 453rpx;color: #707070;margin-left: 16rpx;font-family: PingFang SC;display: flex;flex-wrap: wrap;
		justify-content: space-between;height: 120rpx;
		line-height: 40rpx;
		overflow: hidden;
	}
	.have view{
		margin-right: 10rpx;
	}
</style>
